﻿<!DOCTYPE html>
<html>
<head>
    <title>拖动控件Demo</title>
</head>
<body>
<h2 id="Demo1">Demo1</h2>
<div id="DragObj" style="width:200px;height:40px;">
    <p id="Title" style="margin:0;height:15px; background-color:Yellow;cursor:move;">通过我可以移动哦……</p>
    <div id="DragDemo" style="width:auto;height:30px;background-color:Red;"></div>
</div>

<h2>Demo2</h2>
<div id="MoveSelf" style="width:300px; height:300px; background-color:Gray;cursor:move;">我也可以移动哦……</div>


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="DragBySHF.js"></script>
<script type="text/javascript">
    $(function () {
        $("#Title").DragBySHF({
            objDrag: $("#DragObj"),//要拖动的对象
            isLockX: false, //是否锁定横向拖动
            isLockY: false, //是否锁定纵向拖动
            isLimit: false, //是否限制，如果为True时，则下面四个参数起效
            minLeft: 0,
            maxLeft: 9999,
            minTop: 0,
            maxTop: 9999,
            funStart: function () { }, //开始拖动时执行的方法
            funDraging: function () { }, //拖动时执行的方法
            funStop: function () { } //停止拖动时的方法
        });
        $("#MoveSelf").DragBySHF({
            //objDrag: $("#DragObj"), //要拖动的对象,如果拖动自身的话此处不需要设置
            isLockX: true, //是否锁定横向拖动
            isLockY: false, //是否锁定纵向拖动
            isLimit: true, //是否限制，如果为True时，则下面四个参数起效
            minLeft: 0,
            maxLeft: 50,
            minTop: 0,
            maxTop: 50,
            funStart: function () { }, //开始拖动时执行的方法
            funDraging: function () { }, //拖动时执行的方法
            funStop: function () { } //停止拖动时的方法
        });
    })
</script>
</body>
</html>
